import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Tabs,
  Form,
  Table,
  Input,
  Modal,
  Radio,
  Button,
  Select,
  message,
  Checkbox,
  Progress,
  Popconfirm,
} from 'antd';
import GeneralTableComponent from 'components/GeneralTableComponent';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import GeneralFilterComponent from 'components/GeneralFilterComponent';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;

@connect(({ redPacketConfig, loading }) => ({
  redPacketConfig,
  loading: loading.models.redPacketConfig,
}))

@Form.create()

export default class RedPacketConfig extends PureComponent {
  state = {
    addDialogVisible: false,
    giveOutDialogVisible: false,
    detailDialogVisible: false,
    editDialogVisible: false,
    paramList: {
      pageNo: 1,
      pageSize: 10,
      deductType: '', //抵扣类型
      dateRange: [], //时间范围
      name: '',       //红包名称
      source: '',     //产品类型
      status: '',     //红包状态
      pageStatus: 'config',
    },
    detail: {
      id: '',
      pageNo: 1,
      pageSize: 10,
    },
    edited: {
      id: '',
      limit: 0,
    },
    giveOutIdStatus: false,
    progressStatus: 0,
    giveOutResult: true,
    progressDialogVisible: false,
  };

  componentDidMount() {
    this.getRedPacket();
  }

  getRedPacket = () => {//获取表格数据
    const { dispatch } = this.props;
    const { paramList } = this.state;

    let paramBuf = {
      current: paramList.pageNo,
      deductType: paramList.deductType,
      name: paramList.name,
      packetType: paramList.pageStatus,
      pageSize: paramList.pageSize,
      source: paramList.source == 'all' ? '' : paramList.source,
      status: paramList.status,
      startDate: '',
      endDate: '',
    }
    if (paramList.dateRange[0]) {
      [paramBuf.startDate, paramBuf.endDate] = [paramList.dateRange[0].format('YYYY-MM-DD h:mm:ss'), paramList.dateRange[1].format('YYYY-MM-DD h:mm:ss')];
    }
    //过滤''参数
    let postParam = {};
    for (let [key, val] of Object.entries(paramBuf)) {
      if (val !== '') {
        postParam[key] = val;
      }
    }
    dispatch({
      type: 'redPacketConfig/fetchGetRedPacketTypeList',
      payload: {
        ...postParam
      }
    });
  };

  getDetailRedPacket = () => {//获取弹窗详情列表信息
    const { dispatch } = this.props;
    const { detail } = this.state;

    let postParam = {
      typeId: detail.id,
      pageNo: detail.pageNo,
      pageSize: detail.pageSize,
    }
    dispatch({
      type: 'redPacketConfig/fetchGetRedPacketOperate',
      payload: {
        ...postParam
      }
    });
  };

  getRedPacketListBySource = (source) => {
    const { dispatch } = this.props;
    const { detail } = this.state;

    let postParam = {
      source: source
    }
    dispatch({
      type: 'redPacketConfig/fetchGetRedPacketTypeListBySource',
      payload: {
        ...postParam
      }
    });
  };

  changeRedpacketStatus = (id, operation) => {//更改红包状态
    const { dispatch } = this.props;
    const { paramList } = this.state;
    let postParam = {
      id: id,
      status: '',
      packetType: '',
    }
    postParam.status = operation == 'on' ? 'valid' : ( operation == 'off' ? 'invalid ' : operation );
    postParam.packetType = paramList.pageStatus == 'config' ? 'config' : ( paramList.pageStatus == 'system' ? 'system' : paramList.pageStatus );
    dispatch({
      type: 'redPacketConfig/fetchPostDeleteRedPacketType',
      payload: {
        ...postParam
      }
    }).then(() => {
      this.getRedPacket();
    });
  };

  postNewRedpacket = (formValue) => {//添加红包
    const { dispatch } = this.props;
    const { paramList } = this.state;
    let postParam = {
      title: formValue.addTitile,
      name: formValue.addName,
      amount: formValue.addAmount,
      deductCondition: formValue.addDiscount,
      deductType: formValue.addType,
      source: '',
    }
    postParam.source = formValue.addProduct == 'all' ? '' : formValue.addProduct;
    dispatch({
      type: 'redPacketConfig/fetchPostAddRedPacket',
      payload: {
        ...postParam
      }
    }).then(() => {
      paramList.pageNo = 1;
      this.getRedPacket();
    });
  };

  postGiveOutRedpacket = (formValue) => {//发送红包
    const { dispatch } = this.props;
    const { paramList, progressStatus } = this.state;
    let postParam = {
      source: formValue.giveOutProduct,
      typeId: formValue.giveOutType,
      day: formValue.giveOutPeriod,
      giveReason: formValue.giveOutReason,
      userIds: '',
      isAll: '',
    }
    if (formValue.giveOutId) {
      postParam.userIds = formValue.giveOutId.replace('，', ','); //将中文逗号替换为英文逗号
      postParam.isAll = false;
    } else if (formValue.giveOutIsAll && formValue.giveOutIsAll[0] == 'y') {
      postParam.userIds = null;
      postParam.isAll = true;
    }
    dispatch({
      type: 'redPacketConfig/fetchpostGiveRedPacket',
      payload: {
        ...postParam
      },
      callback: (succuss, res) => {
        let vm = this;
        let statusBuf = progressStatus;
        if (succuss) {
          function sycProgress()  {
            statusBuf += parseInt(Math.random() * 10);
            vm.setState({
              progressStatus: statusBuf <= 100 ? statusBuf : 100 
            });
            if (statusBuf < 100) {
              setTimeout(()=> {
                sycProgress();
              }, 30)
            } else {
              message.succuss('所有红包已经发送完毕');
              setTimeout(()=> {
                vm.setState({
                  progressDialogVisible: false,
                  progressStatus: 0,
                  giveOutResult: true,
                });
              }, 500)
            }
          }
          sycProgress();
        } else {
          let randomNum = parseInt(Math.random() * 88)
          function sycProgress()  {
            statusBuf += parseInt(Math.random() * 10);
            vm.setState({
              progressStatus: statusBuf
            });
            if (statusBuf < randomNum) {
              setTimeout(()=> {
                sycProgress();
              }, 30)
            } else {
              vm.setState({
                giveOutResult: false
              })
            }
          }
          sycProgress();
        }
      }
    })
  };

  postEditAmount = (formValue) => {//编辑红包金额
    const { dispatch } = this.props;
    const { edited } = this.state;
    let postParam = {
      id: edited.id,
      amount: formValue.editedAmount,
    }
    dispatch({
      type: 'redPacketConfig/fetchPostUpdateRedPacketTypeAmount',
      payload: {
        ...postParam
      }
    }).then(() => {
      edited.id = '';
      this.getRedPacket();
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { paramList } = this.state;
    paramList.pageNo = pagination.current;
    paramList.pageSize = pagination.pageSize;
    this.getRedPacket();
  };

  handleDetailTableChange = (pagination, filtersArg, sorter) => {
    const { detail } = this.state;
    detail.pageNo = pagination.current;
    detail.pageSize = pagination.pageSize;
    this.getDetailRedPacket();
  };

  handleFormReset = (value) => {
    const { paramList } = this.state;
    Object.assign(paramList, value);
    paramList.pageNo = 1;
    this.getRedPacket();
  };

  handleFormSearch = (value) => {
    const { paramList } = this.state;
    Object.assign(paramList, value);
    paramList.pageNo = 1;
    this.getRedPacket();
  };

  handleAddRedPacket = () => {
    const { addDialogVisible } = this.state;
    this.setState({
      addDialogVisible: true,
    });
  };

  handleGiveOutRedPacket = () => {
    const { giveOutDialogVisible } = this.state;
    const { paramList } = this.state;
    paramList.pageNo = 1;
    this.setState({
      giveOutDialogVisible: true,
    });
  };

  handleTabChange = (val) => {
    const { paramList } = this.state;
    paramList.pageNo = 1;
    paramList.pageStatus = val;
    this.getRedPacket();
  };

  handleOffLine = (row) => {
    this.changeRedpacketStatus(row.id, 'off');
  };

  handleOnLine = (row) => {
    this.changeRedpacketStatus(row.id, 'on');
  };

  handleAddOk = () => {
    const { addDialogVisible } = this.state;
    const { form } = this.props;
    form.validateFields((err, fieldsValue, ccc) => {
      let isLegelNum = /^[0-9]*[1-9][0-9]*$/;
      let isLegelNumInclude0 = /^[0-9]*$/ 
      if (
        (fieldsValue.addAmount && isLegelNum.test(fieldsValue.addAmount)) && 
        (fieldsValue.addDiscount && isLegelNumInclude0.test(fieldsValue.addDiscount)) && 
        fieldsValue.addName && 
        fieldsValue.addProduct && 
        fieldsValue.addTitile && 
        fieldsValue.addType
      ) {
        this.setState({
          addDialogVisible: false,
        });
        this.postNewRedpacket(fieldsValue);
        form.resetFields(['addName', 'addType', 'addTitile', 'addProduct', 'addDiscount', 'addAmount']);
      }
    });
  };

  handleAddCancel = () => {
    const { addDialogVisible } = this.state;
    this.setState({
      addDialogVisible: false,
    });
  };

  handleGiveOutOk = () => {
    const { paramList, giveOutDialogVisible, progressStatus } = this.state;
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      let checkIdLegel = /^[0-9]+([，,][0-9]+)*$/,
          isLegelNum = /^[0-9]*[1-9][0-9]*$/;
      if (
        fieldsValue.giveOutReason && 
        fieldsValue.giveOutProduct && 
        fieldsValue.giveOutType && 
        (fieldsValue.giveOutPeriod && isLegelNum.test(fieldsValue.giveOutPeriod)) && 
        ( (fieldsValue.giveOutId && checkIdLegel.test(fieldsValue.giveOutId)) || (fieldsValue.giveOutIsAll && fieldsValue.giveOutIsAll[0]) )) {
        this.setState({
          giveOutDialogVisible: false,
          progressDialogVisible: true,
        });
        this.postGiveOutRedpacket(fieldsValue);
        form.resetFields(['giveOutId', 'giveOutProduct', 'giveOutType', 'giveOutPeriod', 'giveOutReason', 'giveOutIsAll']);
        this.setState({
          giveOutIdStatus: false
        });
      } else if( !(fieldsValue.giveOutId || (fieldsValue.giveOutIsAll && fieldsValue.giveOutIsAll[0]) ) ) {
        message.warning('请选择用户');
      } else if(!(fieldsValue.giveOutId && checkIdLegel.test(fieldsValue.giveOutId))) {
        message.warning('用户id不合法')
      }
    });
  };

  handleGiveOutCancel = () => {
    const { giveOutDialogVisible } = this.state;
    this.setState({
      giveOutDialogVisible: false,
    });
  };

  viewDetail = (row) => {
    const { detail } = this.state;
    detail.id = row.id;
    detail.pageNo = 1;
    this.getDetailRedPacket();
    this.setState({
      detailDialogVisible: true,
    });
  };

  handleDetailOk = () => {
    this.setState({
      detailDialogVisible: false,
    });
  };

  handleDetailCancel = () => {
    this.setState({
      detailDialogVisible: false,
    });
  };

  handleEdit = (row) => {
    const { edited } = this.state;
    edited.id = row.id;
    edited.limit = row.deductCondition;
    this.setState({
      editDialogVisible: true,
    });
  };

  handleEditOk = (e) => {
    const { form } = this.props;
    const { paramList, edited } = this.state;
    // e.preventDefault();
    form.validateFields((err, fieldsValue) => {
      let isLegelNum = /^[0-9]*[1-9][0-9]*$/;
      if (fieldsValue.editedAmount && isLegelNum.test(fieldsValue.editedAmount)) {
        if (parseInt(fieldsValue.editedAmount) <= parseInt(edited.limit)) {
          this.setState({
            editDialogVisible: false,
          });
          this.postEditAmount(fieldsValue);
          form.resetFields(['editedAmount']);
        } else {
          message.warning('红包金额不能高于使用金额');
        }
      }
    });
  };

  handleEditCancel = () => {
    this.setState({
      editDialogVisible: false,
    });
  };

  handleGiveOutIdChange = (value) => {
    const { form } = this.props;
    form.resetFields(['giveOutId']);
    if (value[0] == 'y') {
      this.setState({
        giveOutIdStatus: true
      });
    } else {
      this.setState({
        giveOutIdStatus: false
      });
    }
  };

  handleProgressOk = () => {
    this.setState({
      progressDialogVisible: false,
      progressStatus: 0,
      giveOutResult: true,
    });
  };

  handleProgressCancel = () => {
    this.setState({
      progressDialogVisible: false,
      progressStatus: 0,
    });
  };

  handleGiveOutSourceChange = (e) => {
    this.getRedPacketListBySource(e.target.value);
  };

  reDeductType = (type) => {
    let deductType = [{
      value: 'repay',
      label: '仅还款使用',
    }, {
      value: 'buy-vip-card',
      label: '仅购买会员使用',
    }, {
      value: 'new-user-vip',
      label: '仅新用户首次购买会员使用',
    }, {
      value: 'extend',
      label: '仅展期支付使用',
    }];
    let reLabel = 'unknown';
    deductType.forEach((val, index, arr) => {
      if (type == val.value) {
        reLabel = val.label
      }
    });
    return reLabel
  };

  reSourceType = (src) => {
    let sourceType = [{
      value: '',
      label: '全部',
    }, {
      value: 'up',
      label: 'sdfz',
    // }, {
    //   value: 'xbeauty',
    //   label: '想美',
    // }, {
    //   value: 'xflower',
    //   label: '信花花',
    }];
    let reLabel = 'unknown';
    sourceType.forEach((val, index, arr) => {
      if (src == val.value) {
        reLabel = val.label
      }
    });
    return reLabel
  };

  render() {
    const { redPacketConfig: { getRedPacketTypeListData, redPacketOperateData, getRedPacketTypeListBySourceData }, loading, form } = this.props;
    const { progressStatus, giveOutResult } = this.state;
    const { getFieldDecorator } = form;

    const configTableColumns = [{
        title: '序号',
        dataIndex: 'demo',
        key: 'demo',
        render: (text, record, index) => {
          return <span>{index + 1 + ( getRedPacketTypeListData.pagination.current - 1 ) * getRedPacketTypeListData.pagination.size}</span>
        }
    }, {
        title: '产品类型',
        dataIndex: 'source',
        key: 'source',
        render: (text, record, index) => {
          return <span>{this.reSourceType(text)}</span>
        }
    }, {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        render: val => `${val}`
    }, {
        title: '红包名称',
        dataIndex: 'name',
        key: 'name',
        render: val => `${val}`
    }, {
        title: '红包金额',
        dataIndex: 'amount',
        key: 'amount',
        render: val => `${val}`
    }, {
        title: '抵扣条件',
        dataIndex: 'deductCondition',
        key: 'deductCondition',
        render: val => `${val}`
    }, {
        title: '抵扣类型',
        dataIndex: 'deductType',
        key: 'deductType',
        render: (text, record, index) => {
          return <span>{this.reDeductType(text)}</span>
        }
    }, {
        title: '配置时间',
        dataIndex: 'createTime',
        key: 'createTime',
        render: val => `${val}`
    }, {
        title: '操作',
        dataIndex: 'status',
        key: 'status',
        render: (text, record, index) => {
          return record.status == 'valid'
          ? (
            <Popconfirm title="确认下线该红包 ?" onConfirm={() => this.handleOffLine(record)}>
              <a href="javascript:;">下线</a>
            </Popconfirm>
          ) 
          : <span style={{color: '#A4AAAA'}}>已下线</span>
        }
    }];

    const systemTableColumns = [{
        title: '序号',
        dataIndex: 'demo',
        key: 'demo',
        render: (text, record, index) => {
          return <span>{index + 1 + ( getRedPacketTypeListData.pagination.current - 1 ) * getRedPacketTypeListData.pagination.size}</span>
        }
    }, {
        title: '产品类型',
        dataIndex: 'source',
        key: 'source',
        render: (text, record, index) => {
          return <span>{this.reSourceType(text)}</span>
        }
    }, {
        title: '红包名称',
        dataIndex: 'name',
        key: 'name',
        render: val => `${val}`
    }, {
        title: '红包金额',
        dataIndex: 'amount',
        key: 'amount',
        render: val => `${val}`
    }, {
        title: '抵扣条件',
        dataIndex: 'deductCondition',
        key: 'deductCondition',
        render: val => `${val}`
    }, {
        title: '抵扣类型',
        dataIndex: 'deductType',
        key: 'deductType',
        render: (text, record, index) => {
          return <span>{this.reDeductType(text)}</span>
        }
    }, {
        title: '操作记录',
        dataIndex: 'demo6',
        key: 'demo6',
        render: (text, record, index) => {
          return (
              <a href="javascript:;" onClick={() => this.viewDetail(record)}>查看详情</a>
            )
        }
    }, {
        title: '操作',
        dataIndex: 'status',
        key: 'status',
        render: (text, record, index) => {
          return <div>
            {
              record.status == 'valid' ?
              (
                <Popconfirm title="确认下线该红包 ?" onConfirm={() => this.handleOffLine(record)}>
                  <a href="javascript:;">下线</a>
                </Popconfirm>
              ) : 
              (
                <div>
                  <a style={{display: 'inline-block', marginRight: 20}} href="javascript:;" onClick={() => this.handleEdit(record)}>编辑</a>
                  <Popconfirm title="确认上线该红包 ?" onConfirm={() => this.handleOnLine(record)}>
                    <a href="javascript:;">上线</a>
                  </Popconfirm>
                </div>
              )
            }
          </div>

        }
    }];

    const detailTableColumns = [{
        title: '序号',
        dataIndex: 'demo',
        key: 'demo',
        render: (text, record, index) => {
          return <span>{index + 1 + ( redPacketOperateData.pagination.current - 1 ) * redPacketOperateData.pagination.size}</span>
        }
    }, {
        title: '账户',
        dataIndex: 'userName',
        key: 'userName',
        render: val => `${val}`
    }, {
        title: '操作时间',
        dataIndex: 'operateTime',
        key: 'operateTime',
        render: val => `${val}`
    }, {
        title: '具体操作',
        dataIndex: 'remark',
        key: 'remark',
        render: val => `${val}`
    }];

    const searchColumns = [{
      type: 'select',
      value: 'source',
      label: '产品类型',
      placeholder: '请选择',
      selectOption:  [{
        value: 'up',
        label: 'sdfz',
      // }, {
      //   value: 'xbeauty',
      //   label: '想美',
      // }, {
      //   value: 'xflower',
      //   label: '信花花',
      }]
    }, {
      type: 'rangePicker',
      value: 'dateRange',
      label: '时间范围',
      placeholder: ['起始时间', '结束时间'],
      showQuickChoose: true,
    }, {
      type: 'input',
      value: 'name',
      label: '红包名称',
      placeholder: '请输入',
    }, {
      type: 'select',
      value: 'deductType',
      label: '抵扣类型',
      placeholder: '请选择',
      selectOption: [{
        value: 'repay',
        label: '仅还款使用',
      }, {
        value: 'buy-vip-card',
        label: '仅购买会员使用',
      }, {
        value: 'new-user-vip',
        label: '仅新用户首次购买会员使用',
      }, {
        value: 'extend',
        label: '仅展期支付使用',
      }],
      width: 200,
    }, {
      type: 'select',
      value: 'status',
      label: '红包状态',
      placeholder: '请选择',
      selectOption: [{
        value: '',
        label: '全部',
      }, {
        value: 'valid',
        label: '有效',
      }, {
        value: 'invalid',
        label: '失效',
      }]
    }];

    const listItems = getRedPacketTypeListBySourceData ? getRedPacketTypeListBySourceData.map((item) =>
      <Option value={item.id} key={item.id}>{item.name}</Option>
    ) : '';

    return (
      <PageHeaderLayout title="红包配置">
        {
          <Card bordered={false}>

            <div style={{marginBottom: 20}}>
              <Button style={{marginRight: 16}} onClick={this.handleAddRedPacket}>新增</Button>
              <Button onClick={this.handleGiveOutRedPacket}>发放</Button>
            </div>
            
            <GeneralFilterComponent
            itemList={searchColumns}
            onClear={this.handleFormReset}
            onSearch={this.handleFormSearch}
            ></GeneralFilterComponent>
            
            <Tabs defaultActiveKey="config" onChange={this.handleTabChange}>
              <TabPane tab="配置红包" key="config">
                <GeneralTableComponent
                  loading={loading}
                  data={getRedPacketTypeListData}
                  columns={configTableColumns}
                  onChange={this.handleStandardTableChange}
                  showSizeChanger
                />
              </TabPane>
              <TabPane tab="系统红包" key="system">
                <GeneralTableComponent
                  loading={loading}
                  data={getRedPacketTypeListData}
                  columns={systemTableColumns}
                  onChange={this.handleStandardTableChange}
                  showSizeChanger
                />
              </TabPane>
            </Tabs>
            
          </Card>
        }

        <Modal
          title="新增红包"
          visible={this.state.addDialogVisible}
          onOk={this.handleAddOk}
          onCancel={this.handleAddCancel}
        >
          <Form>
            <div>
              <FormItem label="标题">
                {getFieldDecorator('addTitile', {
                  rules: [{ required: true, message: '请输入标题' }],
                })(
                  <Input />
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="红包名称">
                {getFieldDecorator('addName', {
                  rules: [{ required: true, message: '请输入红包名称' }],
                })(
                  <Input />
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="红包金额">
                {getFieldDecorator('addAmount', {
                  rules: [{ required: true, pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入数字金额' }],
                })(
                  <Input />
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="抵扣条件">
                满
                {getFieldDecorator('addDiscount', {
                  rules: [{ required: true, pattern: /^[0-9]*$/, message: '请输入正确条件' }],
                })(
                  <Input style={{width: 200, marginRight: 20, marginLeft: 20}} />
                )}
                可用
              </FormItem>
            </div>
            <div>
              <FormItem label="抵扣类型">
                {getFieldDecorator('addType', {
                  rules: [{ required: true, message: '请选择抵扣类型' }],
                })(
                  <Select>
                    <Option value="repay">仅还款使用</Option>
                    <Option value="buy-vip-card">仅购买会员使用</Option>
                    <Option value="new-user-vip">仅新用户首次购买会员使用</Option>
                    <Option value="extend">仅展期支付使用</Option>
                  </Select>
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="可使用产品">
                {getFieldDecorator('addProduct', {
                  rules: [{ required: true, message: '请选择可使用产品' }],
                })(
                  <RadioGroup>
                    <Radio value="up">sdfz</Radio>
                    {/* <Radio value="xbeauty">想美</Radio>
                    <Radio value="xflower">信花花</Radio> */}
                  </RadioGroup>
                )}
              </FormItem>
            </div>
          </Form>
        </Modal>

        <Modal
          title="发放红包"
          visible={this.state.giveOutDialogVisible}
          onOk={this.handleGiveOutOk}
          onCancel={this.handleGiveOutCancel}
        >
          <Form>
            <div>
              <FormItem label="产品类型">
                {getFieldDecorator('giveOutProduct', {
                  rules: [{ required: true, message: '请选择产品类型'}],
                })(
                  <RadioGroup onChange={this.handleGiveOutSourceChange}>
                    <Radio value="up">sdfz</Radio>
                    {/* <Radio value="xbeauty">想美</Radio>
                    <Radio value="xflower">信花花</Radio> */}
                  </RadioGroup>
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="用户ID" style={{display: 'inline-block'}}>
                {getFieldDecorator('giveOutId', {
                  rules: [{ pattern: /^[0-9]+([，,][0-9]+)*$/, message: 'id不合法'}],
                })(
                  <Input style={{width: 200, marginRight: 20}} disabled={this.state.giveOutIdStatus} placeholder="不同用户id用逗号隔开" />
                )}
              </FormItem>
              <FormItem label="全选" style={{display: 'inline-block'}}>
                {getFieldDecorator('giveOutIsAll', {
                  initialValue: []
                })(
                  <CheckboxGroup options={[{value: 'y', label: '全体用户'}]} onChange={this.handleGiveOutIdChange} />
                  // <Checkbox onChange={this.handleGiveOutIdChange}>全体用户</Checkbox>
                  // Checkbox无法通过fieldReset中更新视图
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="红包选择">
                {getFieldDecorator('giveOutType', {
                  rules: [{ required: true, message: '请选择红包' }],
                })(
                  <Select placeholder={listItems ? "请选择红包" : "请先选择一项产品类型"}>
                    {listItems}
                  </Select>
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="有效期">
                {getFieldDecorator('giveOutPeriod', {
                  rules: [{ required: true, pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正确的有效期' }],
                })(
                  <Input placeholder="单位: 天" />
                )}
              </FormItem>
            </div>
            <div>
              <FormItem label="发放原因">
                {getFieldDecorator('giveOutReason', {
                  rules: [{ required: true, message: '请选择发放原因' }],
                })(
                  <Input />
                )}
              </FormItem>
            </div>
          </Form>
        </Modal>

        <Modal
          title="查看详情"
          visible={this.state.detailDialogVisible}
          onOk={this.handleDetailOk}
          onCancel={this.handleDetailCancel}
          width="60%"
        >
          <GeneralTableComponent
            loading={loading}
            data={redPacketOperateData}
            columns={detailTableColumns}
            onChange={this.handleDetailTableChange}
            // showSizeChanger
          />
        </Modal>

        <Modal
          title="编辑"
          visible={this.state.editDialogVisible}
          onOk={this.handleEditOk}
          onCancel={this.handleEditCancel}
        >
          <Form layout="inline">
            <Row>
              <Col span={24}>
                <FormItem label={<span style={{width: 100, display: 'inline-block'}}>红包金额 ¥</span>}>
                  {getFieldDecorator('editedAmount', {
                    rules: [{ required: true, pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正确的红包金额' }],
                  })(
                     <Input />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>

        <Modal
          title="发送红包"
          visible={this.state.progressDialogVisible}
          onOk={this.handleProgressOk}
          onCancel={this.handleProgressCancel}
        >
          <div style={{width: '100%', textAlign: 'center'}}>
            <span>{ progressStatus == 100 ? '发送成功!' : (!giveOutResult ? '发送失败' : '红包发送中...')}</span>
          </div>
          <Progress percent={progressStatus} status={giveOutResult ? 'normal' : 'exception'}/>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
